<template>
  <div class="app-home _main_y">
    <!-- 首页内容 start -->
    <div class="_content_x">
      <!-- 首页搜索头 组件 -->
      <Header></Header>
      <!-- 首页头部导航 start-->
      <ul class="hometop-subnav">
        <li class="active">
          <a>推荐</a>
        </li>
        <li>
          <a>华为</a>
        </li>
        <li>
          <a>荣耀</a>
        </li>
        <li>
          <a>新品</a>
        </li>
        <li>
          <a>数码惠</a>
        </li>
      </ul>
      <!-- 首页头部导航 end-->
      <!-- 首页主体部分 start _sroll_list-->
      <main class="">
      
        <!-- 主体内容区 -->
        <div class="main-content">
            <!-- 页面置顶按钮 -->
        <a href id="goTop" @click.prevent="goTop" ref="goTop" style="background-image:url(./images/button-top.png)"></a>
          <!-- 首页轮播图 start -->
          <div class="swiper-container swiper-box1">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href>
                  <img
                    src="https://res.vmallres.com/pimages//sale/2019-02/jwW16bHOiJDHuU0tULtj.jpg"
                    alt
                  >
                </a>
              </div>

              <div class="swiper-slide">
                <a href>
                  <img
                    src="https://res.vmallres.com/pimages//sale/2019-02/DwY3B95j7GbqhTCnJ890.jpg"
                    alt
                  >
                </a>
              </div>

              <div class="swiper-slide">
                <a href>
                  <img
                    src="https://res.vmallres.com/pimages//sale/2019-02/SCZtR2Z0OWz2Z5w1m2Yd.jpg"
                    alt
                  >
                </a>
              </div>

              <div class="swiper-slide">
                <a href>
                  <img
                    src="https://res.vmallres.com/pimages//sale/2019-02/efh3mW1xu0Mfqbv1CPn0.jpg"
                    alt
                  >
                </a>
              </div>
              <div class="swiper-slide">
                <a href>
                  <img
                    src="https://res.vmallres.com/pimages//sale/2019-02/sCvIJ2BqKSrKsnSlzGQt.jpg"
                    alt
                  >
                </a>
              </div>
              <div class="swiper-slide">
                <a href>
                  <img
                    src="https://res.vmallres.com/pimages//sale/2019-02/nRYEg7DQR7O7jAvRNRXc.jpg"
                    alt
                  >
                </a>
              </div>
              <div class="swiper-slide">
                <a href>
                  <img
                    src="https://res.vmallres.com/pimages//sale/2019-02/BEFyci9yaz0AJHRSKGfX.jpg"
                    alt
                  >
                </a>
              </div>
              <div class="swiper-slide">
                <a href>
                  <img
                    src="https://res.vmallres.com/pimages//sale/2019-02/EhvGATFH23kVYe34pUC3.jpg"
                    alt
                  >
                </a>
              </div>
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
          </div>
          <!-- 首页轮播图 end -->
          <!-- 商城首页的其他功能导航 start -->
          <div
            class="main-nav-box bg-color"
            style="background-image:url(./images/bg-home-squard.png)"
          >
            <ul class="nav">
              <li>
                <i>
                  <img
                    src="https://res.vmallres.com/pimages//squaredInfo/icon/20190213/DY5mX2aQoCVt63gWQnlD.png"
                    alt
                  >
                </i>
                <span>邀请有礼</span>
              </li>
              <li>
                <i>
                  <img
                    src="https://res.vmallres.com/pimages//squaredInfo/icon/20190213/GA8b4d9ew2UnHx97eHZE.png"
                    alt
                  >
                </i>
                <span>会员领券</span>
              </li>
              <li>
                <i>
                  <img
                    src="https://res.vmallres.com/pimages//squaredInfo/icon/20190213/nOFHKa9U0m2rN4rqd0am.png"
                    alt
                  >
                </i>
                <span>优享购</span>
              </li>
              <li>
                <i>
                  <img
                    src="https://res.vmallres.com/pimages//squaredInfo/icon/20190213/CJSQBniFdRg0CwCeTtiM.png"
                    alt
                  >
                </i>
                <span>以旧换新</span>
              </li>
              <li>
                <i>
                  <img
                    src="https://res.vmallres.com/pimages//squaredInfo/icon/20190213/guGTsIerbvFuEjvKyfxp.png"
                    alt
                  >
                </i>
                <span>优购码</span>
              </li>
            </ul>
          </div>
          <!-- 商城首页的其他功能导航 end -->
          <!-- 商城头条 start -->
          <div class="headline bg-color">
            <div class="title">
              <a href>
                <img
                  src="https://res.vmallres.com/nwap/20190115/images/echannelWap/logo/logo_wapHeadNews.png"
                  alt
                >
              </a>
            </div>
            <div class="swiper-container swiper-box2">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <a href>
                    <span>【黑科技大揭秘】荣耀V20后壳下的光艺术</span>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href>
                    <span>Mate20/X购机赠好礼</span>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href>
                    <span>华为元宵节领2019神券</span>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href>
                    <span>荣耀情人节</span>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href>
                    <span>华为Mate20 X花粉体验报告丨超级商务游戏手机</span>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href>
                    <span>【黑科技大揭秘】荣耀V20后壳下的光艺术</span>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href>
                    <span>Mate20/X购机赠好礼</span>
                  </a>
                </div>
              </div>
            </div>
            <div class="more">
              <a href>更多</a>
            </div>
          </div>
          <!-- 商城头条 end -->
          <!-- 限时购 start -->
          <div class="flash-sale bg-color">
            <!-- 倒计时信息 -->
            <div class="title _justify_center">
              <h3>
                <span class="fw400 start">限时购</span>
                <i class="_bgimg_content"></i>
                <span class="time">
                  <em class="hour">00</em>:
                  <em class="minutes">00</em>:
                  <em class="seconds">00</em>
                </span>
                <span class="fw400 end">后结束</span>
              </h3>
            </div>
            <!-- 商品滑动架子  -->
            <div class="swiper-container goods-show-box">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide _flex_y _align_center"
                  v-for="pro in pimages_product"
                  :key="pro.id"
                >
                  <div class="_flex_y _align_center bg-box">
                    <img :src="pro.url" :alt="pro.title">
                    <span>{{pro.title}}</span>
                  </div>
                  <p class="_flex_x _justify_around" v-if="pro.originalPrice">
                    <span class="red">{{pro.discounts}}</span>
                    <span class="delPrice">{{pro.originalPrice}}</span>
                  </p>
                  <p class="red" v-else>{{pro.discounts}}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 限时购 end -->
          <!-- 商品图片列表 start -->
          <div class="product-images-list _flex_x">
            <div class="list left-list _content_y">
              <img
                v-for="img in newMobilePhone['left-list']"
                :key="img.id"
                :src="img.url"
                :alt="img.title"
              >
            </div>
            <div class="list right-list _content_y">
              <img
                v-for="img in newMobilePhone['right-list']"
                :key="img.id"
                :src="img.url"
                :alt="img.title"
              >
            </div>
          </div>
          <!-- 商品图片列表 end -->
          <!-- 首页各类商品 vue 的 v-for循环区 start -->
          <div
            class="_flex_y _align_center commodities"
            v-for="commodities in variousCommodities"
            :key="commodities.id"
            :class="commodities.className"
          >
            <!-- 1.标题部分  -->
            <h3>{{commodities.title}}</h3>
            <!-- 2.商品的图片列表部分 -->
            <div class="imgList">
              <ul class="_flex_x _wrap">
                <li v-for="imgMessage in commodities.imgList" :key="imgMessage.id">
                  <div class="img">
                    <p>
                      <span v-if="imgMessage.tag">{{imgMessage.tag}}</span>
                    </p>
                    <img :src="imgMessage.url" :alt="imgMessage.title">
                    <p class="promotion">{{imgMessage.promotion}}</p>
                  </div>
                  <p class="title">{{imgMessage.title}}</p>
                  <p class="prices">
                    <span class="price">￥{{imgMessage.price}}</span>
                    <span class="delPrice" v-if="imgMessage.delPrice">{{imgMessage.delPrice}}</span>
                  </p>
                </li>
              </ul>
            </div>
            <!-- 3.商品的swiper滑动部分-->
            <div class="swiper-container commodities-swiper">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="commoditie in commodities.imgSwiper"
                  :key="commoditie.id"
                >
                  <div class="_flex_y _align_center bg-box">
                    <div class="tag">
                      <span
                        v-if="commoditie.tag"
                        :class="{'newProduct':commoditie.newProduct}"
                      >{{commoditie.tag}}</span>
                    </div>
                    <img :src="commoditie.src" :alt="commoditie.title">
                    <span>{{commoditie.promotion}}</span>
                  </div>
                  <p class="title">{{commoditie.title}}</p>
                  <p class="_flex_x _justify_center prices">
                    <span class="price">￥{{commoditie.price}}</span>
                    <span class="delPrice" v-if="commoditie.delPrice">{{commoditie.delPrice}}</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- 4.链接每类的更多商品  -->
            <div class="findMore" v-if="commodities.findMore">
              <span style="background-image:url(./images/arrow_right.png)">{{commodities.findMore}}</span>
            </div>
            <!-- 5.每类商品底部背景隔离 -->
            <div class="bottom-bg"></div>
          </div>
          <!-- 首页各类商品 vue 的 v-for循环区 end -->
          <!-- 首页底部信息 start -->
         <PageBottomContent/>
          <!-- 首页底部信息 end -->
        </div>
      </main>
      <!-- 首页主体部分 end -->
    </div>
    <!-- 首页内容 end -->
    <!-- 底部导航切换组件 -->
    <TabBar></TabBar>
  </div>
</template>

<script>
// 引入组件
import Header from "components/layout/Header";
// 引入请求数据http的工具
import * as http from "utils/http";
// 引入better-scroll插件
import BScroll from 'better-scroll'
export default {
  name: "home",
  components: {
    Header
  },
  data() {
    return {
      pimages_product: [], //首页限时购部分的商品数据
      newMobilePhone: {}, //限时购下一些静态的新品手机图片列表
      boutiqueRecommend: [], //精品推荐的商品数据
      variousCommodities: [] //各类商品汇总数据
    };
  },
  methods: {
    goTop(){
      // 此处待修改 优化
      let scroll = new BScroll('main',{
          scrollY: true,
          click: true
      })
      // scroll.scrollTo(0,0)
      scroll.wrapper.scrollTop=0
    }
  },
  async beforeCreate() {
    // ############### 请求数据 start ##############

    // 1.限时购商品数据
    this.pimages_product = await http.get(this, "./data/home/pimages-product.json");

    // 2.手机新品图片数据
    this.newMobilePhone = await http.get( this, "./data/home/new-mobile-phone.json");

    // 3.首页各类产品数据汇总
    this.variousCommodities = await http.get(this, "./data/home/rendering.json");
    //############### 请求数据 end ###############
  },
  watch: {
    //对于数据渲染的轮播 通过监听数据变化再执行实例化swiper Home的main里面的商品滑动架子展示
    pimages_product() {
      setTimeout(function() {
        var mySwiper3 = new Swiper(".goods-show-box", {
          slidesPerView: 4
        });
      }, 0);
    },
    variousCommodities() {
      setTimeout(function() {
        var mySwiper4 = new Swiper(".commodities-swiper", {
          slidesPerView: 3
        });
      }, 0);
    }
  },
  created() {
    // ###############swiper的轮播功能 start###########
    setTimeout(function() {
      // Home的main里面的轮播图
      var mySwiper1 = new Swiper(".swiper-box1", {
        autoplay: 5000, //可选选项，自动滑动
        loop: true,
        pagination: ".swiper-pagination",
        autoplayDisableOnInteraction: false,
        paginationClickable: true
      });

      // Home的main里面的商城头条轮播
      var mySwiper2 = new Swiper(".swiper-box2", {
        direction: "vertical", //垂直
        autoplay: 5000, //可选选项，自动滑动
        loop: true,
        onlyExternal: true //不接受手势的操作
      });
    }, 0);
    // ###############swiper的轮播功能 end###########
  },
  mounted(){
    // console.log('store',this.$store)
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/_base'
@import '~styles/_ellipsis'

.bg-color
  background-color #eee
.bg-box
  background #eee
  box-shadow 0 0.05rem 0.05rem 0 rgba(0, 0, 0, 0.05)
  border-radius 0.05rem
.app-home
  height 100%
  display flex
  flex-direction column
  ._content_x
    flex 1
    display flex
    flex-direction column
    .hometop-subnav
      height 0.35rem
      overflow hidden
      display flex
      li
        &.active
          a
            color $bg-color
        a
          display inline-block
          font-size 0.14rem
          line-height 1em
          margin 0.09rem 0 0.07rem
          padding 0 0.15rem
          color #777
    main
      flex 1
      overflow-x hidden
      overflow-y auto
      padding 0 0.1rem
      #goTop
        position fixed
        width 0.52rem
        height 0.52rem
        border-radius 50%
        background-position center
        background-size 100%
        right 0.08rem
        bottom 0.6rem
        z-index 9999 
      .swiper-box1
        width 3.63rem
        height 1.57rem
        border-radius 0.1rem
        .swiper-slide
          a
            width 100%
            img
              width 100%
              height 100%
      .main-nav-box
        height 1rem
        background-size 100%
        background-repeat no-repeat
        ul.nav
          padding-top 0.375rem
          height 0.65rem
          display flex
          li
            flex 1
            display flex
            flex-direction column
            justify-content space-around
            align-items center
            color #9b9b9b
            i
              width 0.42rem
              height 0.42rem
              display block
              img
                width 100%
      .headline
        height 0.415rem
        display flex
        margin-top 0.1rem
        .title
          width 0.515rem
          height 0.41rem
          display flex
          align-items center
          padding-left 0.18rem
          img
            width 100%
            height 100%
        .swiper-box2
          flex 1
          .swiper-slide
            ellipsis()
            a
              height 100%
              line-height 0.41rem
              color #4d4d4d
              padding-left 0.21rem
              &::before
                content ''
                position absolute
                left 0.08rem
                top 50%
                margin-top -0.02rem
                width 0.04rem
                height 0.04rem
                display block
                border-radius 50%
                background-color rgba(155, 155, 155, 0.5)
        .more
          width 0.3rem
          padding-right 0.18rem
          display flex
          align-items center
          text-align center
          a
            color #999
      .flash-sale
        .title
          height 0.16rem
          padding 0.15rem 0 0.1rem
          display flex
          h3
            display flex
            align-items center
            flex-direction center
            color #4d4d4d
            i
              display block
              width 0.15rem
              height 0.15rem
              margin 0 0.03rem
              background-image url('../assets/images/seckill_title.png')
            span
              font-size 0.18rem
              line-height 0.18rem
              display flex
              &.fw400
                font-weight 400
              &.end
                color #9b9b9b
                font-size 0.1rem
                margin-left 0.03rem
        .goods-show-box
          height 1.07rem
          padding-bottom 0.08rem
          .swiper-slide
            width auto
            height 1.07rem
            text-align center
            .bg-box
              background #fff
              box-shadow 0 0.05rem 0.05rem 0 rgba(0, 0, 0, 0.05)
              border-radius 0.05rem
              img
                width 0.64rem
                height 0.64rem
              span
                width 0.68rem
                height 0.15rem
                padding-top 0.04rem
                ellipsis()
            p
              width 0.78rem
              height 0.24rem
              line-height 0.24rem
              ellipsis()
            .red
              color #ca141d
            .delPrice
              color #999
              text-decoration line-through
      .product-images-list
        width 100%
        padding 0.05rem 0 0.1rem
        .list
          width 1.8rem
          margin-right 0.05rem
          img
            width 100%
            margin-bottom 0.05rem
        .right-list
          margin-left 0.05rem
      .commodities
        width 100%
        h3
          height 0.2rem
          line-height 0.2rem
          font-size 0.2rem
          padding 0.2rem 0 0.15rem
          font-weight normal
        .imgList
          ul
            width 100%
            li
              width 1.7rem
              margin 0.02rem
              text-align center
              .img
                width 1.7rem
                height 1.78rem
                overflow hidden
                border-radius 0.1rem
                position relative
                img
                  height 1.78rem
                  margin-left -0.52rem
                .promotion
                  position absolute
                  bottom 0
                  width 100%
                  height 0.25rem
                  background rgba(0, 0, 0, 0.2)
                  color rgba(255, 255, 255, 0.9)
                  line-height 0.25rem
              .title
                height 0.18rem
                padding-top 0.08rem
                line-height 0.18rem
                font-size 0.14rem
              .prices
                padding 0.04rem 0 0.17rem
                .price
                  color #ca141d
                .delPrice
                  padding-left 0.05rem
                  text-decoration line-through
                  color #999
        .swiper-container
          width 100%
          .swiper-slide
            .bg-box
              width 1rem
              padding 0 0.05rem 0.05rem
              overflow hidden
              .tag
                height 0.15rem
                padding-bottom 0.1rem
                span
                  display flex
                  background-color #FF6A6E
                  color #fff
                  // width  auto
                  // height .12rem
                  padding 0.01rem 0.1rem 0.02rem
                  border-radius 0 0 0.03rem 0.03rem
                  &.newProduct
                    background-color #68BEFF
              img
                width 0.9rem
              &>span
                padding 0 0.1rem
                font-size 0.1rem
                height 0.2rem
                line-height 0.2rem
                text-align center
                width 100%
                color #9b9b9b
                background-color rgba(155, 155, 155, 0.2)
                ellipsis()
            .title
              text-align center
              padding-top 0.09rem
              height 0.33rem
              white-space normal
            .prices
              padding 0.06rem 0 0.17rem
              .price
                color #ca141d
              .delPrice
                text-decoration line-through
                color #999
                padding-left 0.05rem
        .findMore
          padding 0.11rem 0
          span
            width 1.03rem
            height 0.14rem
            line-height 0.14rem
            font-size 0.13rem
            padding-right 0.1rem
            background-repeat no-repeat
            background-size auto 80%
            background-position right center
        .bottom-bg
          width 100%
          height 0.1rem
          border-radius 0.05rem
          background #eee
      
</style>

